<template>
	<view class="control">
		<view class="control_box_1">
			<view class="control_box_text" style="text-align: center;color: #ffffff;padding-top: 40rpx;">
				{{list.court_name}}
			</view>
			<view class="" style="text-align: center;color: rgb(220, 198, 101) ;margin-top: 20rpx;">
				{{list.field_name}}
				{{list.timestr}}
			</view>
			<view class="">
				<view class="box-3">
					<view class="flex-between image-1">
						<view class="">
							入场时间
						</view>
						<!-- <image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/23486c439eebab21a0831787cad64d5ec2259398.png">
						</image> -->
						<image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f2026f5c65ac585d47b3eef17833b262f362643a.png">
						</image>
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1216fc76e459f3e2bc3f8d8f698ad9ca085d2697.png">
						</image>
						<image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f2026f5c65ac585d47b3eef17833b262f362643a.png">
						</image>
						<view class="">
							离场时间
						</view>
						<!-- <image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/14c51739ebdaf6d43df36b9b2423e843ef9cd9bc.png">
						</image>
						<image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f2026f5c65ac585d47b3eef17833b262f362643a.png">
						</image>
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/da98d0fe4de57b84884b7b6e3998dfcb82e7c6a1.png">
						</image> -->
					</view>
					<view class="flex-between">
						<text style="color: #ffffff;">{{list.in_time}}</text>
						<text></text>
						<text></text>
						<text style="color: #ffffff;">{{list.out_time}}</text>
					</view>
				</view>
			</view>
			<view class="control_box-3">
				<view style="text-align: center;color: #cccccc;padding-top: 20rpx;">
					总在场时长
				</view>
				<view style="text-align: center;color: #ffffff ;margin-top: 10rpx;">
					{{list.hourLen}}
				</view>
			</view>
		</view>
		<view class="control_box_2">
			<view class="control_box_s">
				<view style="text-align: center;color: #000000;padding-top: 50rpx;">
					超时时长
				</view>
				<view style="text-align: center;color: #000000 ;margin-top: 10rpx;font-size: 42rpx;">
					{{nums}}
				</view>
			</view>
			<view class="control_box_x">
				<view style="text-align: center;color: #000000;padding-top: 50rpx;">
					超时金额
				</view>
				<view style="text-align: center;color: #ff0000 ;margin-top: 10rpx;font-size: 42rpx;">
					¥{{list.need_pay}}
				</view>
			</view>
		</view>
		<view class="control_box_2" style="margin-top: 60rpx;">
			请在支付后5分钟内离开球场，否则将重新计时
		</view>
		<!-- <view>{{nums}}</view> -->
		<view class="btn">
			<u-button type="primary" shape="circle" size="large" text="立即支付" @click="showCoupons">
			</u-button>
		</view>
	</view>
</template>

<script>
	const person = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				options: {},
				list: {},
				timer: null,
				nums: '',
				payWaitTime: '00:15:00',
			}
		},
		onLoad(options) {
			this.options = options;
			this.getOverTime()



		},
		onShow() {
			let that = this;
			that.timer = null;
			// clearInterval(that.timer);
			clearTimeout(that.timer);
			that.timer = setTimeout(() => {
				this.getOverTime();
			}, 60000);
		},
		// 一般页面用onUnload
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		// tabbar页面用onHide
		onHide() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		methods: {
			async getOverTime() {
				let params = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					court_id: this.options.court_id,
					chosen_id: this.options.chosen_id,
					open_id: uni.getStorageSync('openid'),
				}
				let res = await person.getOverTime(params)
				if (res.code === 1) {
					this.list = res.data.result
					let time = res.data.result.over_time

					var len = time.split(':')
					if (len.length == 3) {
						var hour = time.split(':')[0];
						var min = time.split(':')[1];
						var sec = time.split(':')[2];
						// return Number(hour * 3600) + Number(min * 60) + Number(sec);
					}

					if (len.length == 2) {
						var min = time.split(':')[0];
						var sec = time.split(':')[1];
						// return Number(min * 60) + Number(sec);
					}
					if (len.length == 1) {
						var sec = time.split(':')[0];
						// return Number(sec);
					}

					// var hour = time.split(':')[0];
					// var min = time.split(':')[1];
					// var sec = time.split(':')[2];
					// return  Number(hour*3600) + Number(min*60) + Number(sec);

					// var hours, minutes, seconds;
					// /时 分 秒/
					// hours = minutes = seconds = 0; //初始化
					let hours = hour; //初始化
					let minutes = min; //初始化
					let seconds = sec; //初始化
					let millisecond = 0; //毫秒

					if (hours < 10) {
						hours = "0" + hours;
					}
					if (minutes < 10) {
						minutes = "0" + minutes;
					}

					if (seconds < 10) {
						seconds = "0" + seconds;
					}
					this.timer = setInterval(() => {
						millisecond = millisecond + 50;
						// console.log("---millisecond----"+millisecond);
						if (millisecond >= 1000) {
							millisecond = 0;
							// seconds = seconds + 1;
							var a = 1;
							seconds = Number(seconds) + Number(a)
						}
						if (seconds >= 60) {
							seconds = 0;
							// minutes = minutes + 1;
							var b = 1;
							minutes = Number(minutes) + Number(b)
						}

						if (minutes >= 60) {
							minutes = 0;
							// hours = hours + 1;
							var c = 1;
							hours = Number(hours) + Number(c)
						}

						// console.log("-------"+hours+'时'+minutes+'分'+second+'秒');
						this.nums = hours + ':' + minutes + ':' + seconds;
					}, 50);
				}
			},
			async showCoupons() {
				let params = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					court_id: this.options.court_id,
					chosen_id: this.options.chosen_id,
					open_id: uni.getStorageSync("openid"),
				}
				let res = await person.postOrder(params)
				if (res.code === 1) {
					console.log(res, '5552525')

					if (res.data.data.goods_price >= '0.01') {
						var that = this
						if (uni.getStorageSync("buy_success_id") != '' && uni.getStorageSync("buy_success_id") !=
							null && uni.getStorageSync("buy_success_id") != undefined) {
							uni.requestSubscribeMessage({
								tmplIds: [uni.getStorageSync("buy_success_id")],
								success(ru) {
									uni.navigateTo({
										url: "/page_venues/pages/venuesDetail/pay/pay?amount=" +
											res.data.data.goods_price +
											"&payWaitTime=" +
											res.payWaitTime +
											"&order_id=" +
											res.data.data.order_no +
											"&orderid=" +
											res.data.data.order_number +
											"&order_type=" +
											res.data.data.order_type + "&belong=" +
											'court' +
											"&chaoshitype=" +
											6 + "&venue_id=" +
											res.data.data.venue_id +
											"&goods_id=" +
											res.data.data.id,
									});
								}
							})
						} else {
							uni.navigateTo({
								url: "/page_venues/pages/venuesDetail/pay/pay?amount=" +
									res.data.data.goods_price +
									"&payWaitTime=" +
									res.payWaitTime +
									"&order_id=" +
									res.data.data.order_no +
									"&orderid=" +
									res.data.data.order_number + "&belong=" +
									'court' +
									"&chaoshitype=" +
									6 +
									"&order_type=" +
									res.data.data.order_type + "&venue_id=" +
									res.data.data.venue_id +
											"&goods_id=" +
											res.data.data.id,
							});
						}
						// uni.requestSubscribeMessage({
						// 	tmplIds: ['LVTnQXVNAhpWlg6HdmMWDL0LyVw6t19Gjn96ScI58fU'],
						// 	success(ru) {
						// 	uni.navigateTo({
						// 		url: "/page_venues/pages/venuesDetail/pay/pay?amount=" +
						// 			res.data.data.goods_price +
						// 			"&payWaitTime=" +
						// 			res.payWaitTime +
						// 			"&order_id=" +
						// 			res.data.data.order_no +
						// 			"&orderid=" +
						// 			res.data.data.order_number +
						// 			"&order_type=" +
						// 			res.data.data.order_type + "&venue_id=" +
						// 			res.data.data.venue_id,
						// 	});
						// 	}
						// })
					}
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		height: 100vh;

		.control_box_1 {
			width: 90%;
			height: 30%;
			background-color: #2F75FA;
			margin-left: 5%;
			border-radius: 20rpx;
			margin-top: 20rpx;

		}

		.control_box_2 {
			width: 90%;
			height: 15%;
			// background-color: rgb(34, 128, 255) ;
			margin-left: 5%;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.control_box_s {
				width: 48%;
				height: 100%;
				float: left;
				background-color: #F3F3F3;
				border-radius: 20rpx;
				margin-top: 20rpx;
			}

			.control_box_x {
				width: 48%;
				height: 100%;
				float: right;
				background-color: #F3F3F3;
				margin-left: 4%;
				border-radius: 20rpx;
				margin-top: 20rpx;
			}
		}

		.control_box-3 {
			width: 100%;
			height: 30%;
			background-color: rgb(34, 128, 255);
			// margin-left: 5%;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			// margin-bottom: 20rpx;
		}

		.box-3 {
			padding: 40rpx 20rpx 25rpx 20rpx;
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			font-weight: 700;
			// background-color: rgb(255, 255, 255);

			.image-1 {
				// padding: 0 24rpx;
				margin-bottom: 26rpx;

				image {
					width: 47rpx;
					height: 46rpx;
				}

				view {
					width: 98rpx;
					height: 46rpx;
					color: #cccccc;
				}
			}
		}

		.btn {
			padding: 0px 30rpx;
			margin-top: 300rpx;
		}
	}
</style>
